<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
			
			<style type="text/css">
				#body{
					width: 500px;height: 500px;
					margin: 50px auto;
					position: relative;
					/*border: 3px solid red;*/
					/*box-shadow:1px 5px 4px 1px darkgoldenrod;*/ 
				}
				#cover{
					width: 500px;height: 500px;
					position: absolute;
					left: 0px;top: 0px;
				}
				#box{
					width: 260px;height: 260px;background: url("./earth.jpg") no-repeat;background-size: 100%;
					border-radius: 50% 50%;
					position: absolute;
					top: 0;left: 0;
					/*border: 1px solid red;*/
				}
				#box #ro{
					width: 50px;height: 50px;background: url("./moon.jpg") no-repeat;background-size: 100%;
					border-radius: 50% 50%;
					margin-top: 105px;margin-left: 105px;
				}
			</style>
	</head>
	<body>
		<div id="body">
			<div id="box"><div id="ro"></div></div>
			<div id="cover"></div>
		</div>
		
		<script type="text/javascript">
		
			var box=document.getElementById("box");
			var body=document.getElementById("body");
			var ro = document.getElementById('ro');
			var i=0;
			body.addEventListener("mousemove",function(e){
				var ev = window.event || e ;
				var X=ev.offsetX || ev.layerX;
				var Y=ev.offsetY || ev.layerY;;
				document.title = X +"|"+ Y;
				box.style.left = X-50 + "px";
				box.style.top = Y-50 + "px";
				
			},false);
			box.addEventListener("mouseover",function(){
				var t=setInterval(function(){
					
						i++;
						var len=box.offsetWidth/2+100;
						var lenY=Math.sin(Math.PI/180*i)*len;
						var lenX=Math.cos(Math.PI/180*i)*len;
						console.log(len);
						ro.style.transform="translate("+lenX+"px,"+lenY+"px)";
						box.style.transform="rotate("+i*0.5+"deg)";
						box.style.transform="transform-origin"+":"+"150% 150%";
					},80)
			},false);
		</script>
		
	</body>
</html>
